<template>
    <div class="flex flex-wrap items-center">
        <div v-for="(item, index) in urls" :key="index" class="flex items-center">
            <el-image :src="toAbsoluteUrl(item)" fit="contain" :preview-src-list="previewUrls(urls)"
            class="mx-1" style="width: 100px; height: 100px; border: 1px solid #eeeeee;" />
            <el-button class="ml-1 delete-button" @click="removeImage(index)">
                <el-icon><Delete /></el-icon>
            </el-button>
        </div>
        <div style="height: 100px; width: 100px; border: 1px dashed #eeeeee; font-size: 20px;"
            class="flex justify-center items-center m-1" @click="open">
            <el-icon>
                <Plus />
            </el-icon>
        </div>
    </div>
    
    <el-dialog title="选择图片" custom-class="custom-dialog" v-model="dialogVisible" width="80%" top="5vh">
        <el-container class="bg-white rounded-lg">
            <el-header class="flex items-center justify-start" style="border-bottom: 1px solid #eeeeee;">
                <el-button type="primary" @click="onAddCatogery">新增图片分类</el-button>
                <el-button type="warning" @click="onAddImg">上传图片</el-button>
            </el-header>
        <el-container>
            <ImageAside ref="imageAsideRef" :cHeight="cHeight" @current-change="onChange" />
            <ImageMain ref="imageMainRef" :categoryId="categoryId" :cHeight="cHeight" :selectable="true" :multi="true" :selectedUrls="urls" />
        </el-container>
        </el-container>
        <template #footer>
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="submit">OK</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import { toAbsoluteUrl } from './../composables/util'
import ImageAside from './ImageAside.vue'
import ImageMain from './ImageMain.vue'

const dialogVisible = ref(false)

// 定义接收的 props
const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  },
  placeholder: {
    type: String,
    default: '请选择图片'
  }
})

const urls = ref([])
onMounted(()=>{
    urls.value = []
    if(props.modelValue != null && props.modelValue.length > 0) {
        props.modelValue.forEach(item => {
            urls.value.push(item)
        })
    }
})

// 获取图片预览地址集合
const previewUrls = (surls) => {
  let purls = []
  surls.forEach(item => {
    purls.push(toAbsoluteUrl(item))
  })
  return purls
}
const removeImage = (index) => {
    // 从 urls 数组中移除对应索引的图片 URL
    urls.value.splice(index, 1)
}

// 定义触发的事件
const emit = defineEmits(['update:modelValue'])

// 当点击确定按钮的时候，触发事件
const submit = () => {
    let re = imageMainRef.value.getSelectedImageUrl()
    re.forEach(item => {
        urls.value.push(item)
    })
    emit('update:modelValue', urls)
    dialogVisible.value = false
}

const open = () => {
  dialogVisible.value = true
}

// 选择图片弹出框
const imageAsideRef = ref(null)

const cHeight = ref(0)
const el = ref(null)

// 计算Image内容区域高度
const calHeight = () => {
  const windowHeight = window.innerHeight || document.body.clientHeight
  cHeight.value = (windowHeight - 60 - 40 - 170) * 0.8
}
calHeight()

// 监听el组件，即整个内容页面组件的尺寸发生变化
useResizeObserver(el, (entries) => {
  calHeight()
})

const imageMainRef = ref(null)
const categoryId = ref(0)
// 分类选中变化事件
const onChange = (id) => {
  categoryId.value = id
}

// 新增图片分类
const onAddCatogery = () => {
  imageAsideRef.value.addCatoyery()
}

// 新增图片上传
const onAddImg = () => {
  imageMainRef.value.openUploadFile()
}
</script>
<style scoped>
.delete-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0 5px; /* 可根据需要调整内边距 */
}
.delete-button .el-icon {
  font-size: 18px; /* 可根据需要调整图标大小 */
  color: #999; /* 可根据需要调整图标颜色 */
}
.delete-button:hover {
  color: #f56c6c; /* 可根据需要调整悬停时的颜色 */
}
</style>